<template>
  <div>
    <div class="header">
      <div class="left iconfont icon-icon-12" @click="showPopup"></div>
      <div class="center">MUSIC-VUE</div>
      <router-link
        class="right iconfont icon-icon-7"
        to="/search"
        tag="div"
      ></router-link>
    </div>
    <!-- 菜单蓝弹出框 -->
    <van-popup
      v-model="show"
      position="left"
      :style="{ height: '100%', width: '80%' }"
      class="crol"
    >
      <userView></userView>
    </van-popup>

    <van-sticky>
      <div class="navs">
        <router-link to="/recommend" class="item" tag="div"
          ><span>推 荐</span>
        </router-link>
        <router-link to="/rank" class="item" tag="div"
          ><span>排 行</span>
        </router-link>
        <router-link to="/singer" class="item" tag="div"
          ><span>歌 手</span>
        </router-link>
        <router-link to="/mv" class="item" tag="div"
          ><span>M V</span>
        </router-link>
      </div>
    </van-sticky>
  </div>
</template>
<script>
import userView from "../components/user.vue";
export default {
  data() {
    return {
      show: false,
    };
  },

  methods: {
    showPopup() {
      this.show = true;
    },
  },
  components: {
    userView,
  },
};
</script>
<style lang="less">
.crol {
  height: 100vh;
  list-style: none;
}

.header {
  height: 0.984375rem;
  display: flex;
  // background-color: #d4473c;
  background-color: skyblue;
  color: #fff;
  text-align: center;
  .left {
    flex: 0 0 1.0625rem;
    font-size: 0.75rem;
    line-height: 0.984375rem;
  }
  .center {
    flex: 1;
    line-height: 0.984375rem;
    font-size: 0.375rem;
  }
  .right {
    flex: 0 0 1.0625rem;
    font-size: 0.625rem;
    line-height: 0.984375rem;
  }
}
.van-sticky{
  margin: auto;
  max-width: 640px;
}

.navs {
  display: flex;
  color: #fff;
  // background-color: #d4473c;
  background-color: skyblue;
  .item {
    font-size: 3vw;
    height: 1.125rem;
    flex: 1;
    text-align: center;
    span {
      margin-top: 0.3125rem;
      height: 0.515625rem;
      line-height: 0.515625rem;
      display: inline-block;
      border-bottom: 2px solid transparent;
    }
    &.router-link-active span {
      font-weight: bold;
      border-color: #fff;
    }
  }
}
</style>